<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<jsp:include page="inc.jsp"></jsp:include>
<script type="text/javascript">
    var isLeftTree=false;
	var treePanel;
	var form,win;
	var sysConfig;
	function getSysConfig() {
	    if (sysConfig == null) {
	      Ext.Ajax.request({
	            url : "commonController/getsystemconfig.action",
	            scope : this,
	            async : false,
	            callback : function(o, s, r) {
	              var resp = Ext.decode(r.responseText);
	              sysConfig = {
	            	 productName : resp.productName,
	                vendor : resp.vendor,
	                copyright : resp.copyright,
	                version : resp.version,
	                website : resp.website,
	                buildId : resp.buildId,
	                userName : resp.userName
	              }
	            }
	          });
	    }
	  }
	function createForm() {
		Ext.define('defaultForm', {
			extend : 'Ext.form.Panel',
			fields : new Ext.util.MixedCollection(),
			initComponent : function() {
				var me = this;
				var tn = 1;

				this.fields.add("password", new Ext.form.TextField({
					name : "password",
					inputType : "password",
					dataIndex : "password",
					fieldLabel : "原密码",
					allowBlank : false
				//错误信息的显示
				}));
				this.fields.add("newPwd", new Ext.form.TextField({
					name : "newPwd",
					inputType : "password",
					dataIndex : "newPwd",
					fieldLabel : "新密码",
					allowBlank : false
				}));
				this.fields.add("newPwdTwo", new Ext.form.TextField({
					name : "newPwdTwo",
					inputType : "password",
					dataIndex : "newPwdTwo",
					fieldLabel : "再次输入新密码",
					allowBlank : false
				}));
				this.items = [ {
					layout : "form",
					columnWidth : 1,
					labelAlign : "right",
					labelWidth : 100,
					items : [ this.fields.get("password"),
					          this.fields.get("newPwd"),this.fields.get("newPwdTwo")]
				} ];
				this.frame = true;
				this.layout = 'fit';
				this.region = 'east';
				this.border = true;
				this.split = true;
				this.callParent(arguments);
			},
			onRender : function() {
				this.callParent(arguments);
			},
			newDataRecord : function() {
				this.fields.get("password").setValue('');
				this.fields.get("newPwd").setValue('');
				this.fields.get("newPwdTwo").setValue('');
				createWindows();
			}
		});
	}
	function createWindows() {
		if (win == null) {
			win = new Ext.Window({
				title : '修改密码',
				iconCls : 'icon-win',
				autoHeight : true,
				width : 335,
				height : 400,
				buttonAlign : 'center',
				buttons : [ {
					text : "保存",
					handler : function() {
						if (form.getForm().isValid()) {
							form.getForm().submit({
								url : 'userController/savePwd.action',
								scope : form,
								success : function(form, action) {
									win.hide();
									grid.getStore().reload();
								},
								failure : function(form, action) {
									 if (action.result.message == undefined)
									      Ext.Msg.alert('错误', '网络连接失败.');
									    else
									      Ext.Msg.alert('错误', action.result.message);
								},
								waitMsg : '保存数据...'
							});
						} else {
							Ext.Msg.alert('提示', '表单含有无效或空数据');
						}
					},
					id : "btnSave"
				}, {
					text : "关闭",
					id : "btnClose",
					handler : function() {
						win.hide();
					}
				} ],
				layout : 'fit',
				plain : false,
				closable : false,
				modal : true,
				items : [ form ]
			});
		}
		win.show();
	}
		
	
	Ext.onReady(function() {
		Ext.QuickTips.init();
		getSysConfig();
		//注销
		function doLogout() {
			Ext.Msg.show({
				title : '注销确认',
				msg : '真的要注销吗?',
				buttons : Ext.Msg.YESNO,
				scope : this,
				fn : function(btn){
					if(btn == 'yes'){
						Ext.Ajax.request({
					          url : 'userController/logout.action',
					          method : "POST",
					          callback : function(o, s, r) {
					            var respText = Ext.JSON.decode(r.responseText);
					            if (respText.success) {
					              manView.destroy();
					              window.top.location.href = 'login.jsp';
					            } else {
					              if (!Ext.isEmpty(respText.message)) {
					                Ext.Msg.alert('错误', respText.message);
					              } else {
					                Ext.Msg.alert('错误', '因为不能取得服务端信息，不能正常注销。');
					              }
					            }
					          }
					        });
					}
				},
				icon : Ext.MessageBox.QUESTION
			});
		  }
		
		var aboutMenu = new Ext.menu.Menu({
	          id : 'about-menu',
	          style : {
	            overflow : 'visible'
	          },
	          items : [{
	                text : '关于',
	                handler : function() {
	                	
	                },
	                scope : this
	              }, {
	                text : '在线帮助',
	                handler : function() {
	                },
	                scope : this,
	                disabled : true
	              }]
	        });
		menuBar = new Ext.toolbar.Toolbar({
	          id : 'menu-toolbar',
	          height : 30,
	          listeners:{ 
	                'itemcontextmenu':function(view,record,item,index,e,eOpts){ 
	                   alert('dd');
	                } 
	            },
	          items : ['-',
	              {
	                id : "menu-change-pwd",
	                text : '修改密码',
	                handler : function() {
	                	form.newDataRecord();
						createWindows();	
	                },
	                scope : this
	              },
	              {
	                text : '帮助',
	                menu : aboutMenu
	              },
	              {
	                id : "menu-logout2",
	                text : '注销',
	                handler : function() {
	                  doLogout();
	                },
	                scope : this
	              }]
	        });
				var contentPanel = new Ext.TabPanel(
						{
							region : 'center',
							enableTabScroll : true,
							//实现标签滚动
							activeTab : 0,
							resizeTabs:true, // turn on tab resizing
							listeners:{ 
				                'itemcontextmenu':function(view,record,item,index,e,eOpts){ 
				                   alert('dd');
				                } 
				            },
							items : [ {
								id : 'homePage',
								title : '首页',
								autoScroll : true,
								html : '<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
							} ]
						});
				Ext.define('treeModel', {
					extend : 'Ext.data.Model',
					fields : [ {
						name : 'id',
						type : 'string'
					}, {
						name : 'text',
						type : 'string'
					}, {
						name : 'url',
						type : 'string'
					}, {
						name : 'iconcls',
						type : 'string'
					} ]
				});
				
				var leftPanel = Ext.create('Ext.Panel', {
					id : 'leftPanel',
					region : 'west',
					 layout: 'accordion',
					title : '导航栏',
					width : 200,
					minSize : 200,
					maxSize : 350,
					activeTab : 0,
					//items : [ treePanel ],
					collapsible : true
				});
				if(isLeftTree){
//				    实体类保存在Ext.data.TreeStore中：
					var store = new Ext.data.TreeStore({
						//fields:['text'],
						model : 'treeModel',
						autoLoad : false,
						expanded : false,
						proxy : {
							type : 'ajax',
							actionMethods : 'post',
							url : 'resourceController/getMenu.action',
							reader : {
								type : 'json'
							}
						},
						folderSort : true,
						sorters : [ {
							property : 'text',
							direction : 'ASC'
						} ]
					});
					store.load();
					treePanel = new Ext.tree.TreePanel(
							{
								width : 200,
								useArrows : true,
								autoScroll : true,
								layout : 'fit',
								animate : true,
								rootVisible:false,//是否显示根节点
								store : store,
								listeners : {
									itemclick : function(v, r, item) {
										var url = r.raw.url;
										if (url != "" && url != 'null' ) {
											url = '${pageContext.request.contextPath}/'
													+ url;
											var n = contentPanel
													.getComponent(r.data.id);
											if (!n) { //判断是否已经打开该面板
												n = contentPanel
														.add({ //新增tab
															id : r.data.id,
															title : r.data.text,
															closable : true,
															iconCls:r.raw.iconCls,
															// autoLoad:{ url:url,scripts:true}
															//注：autoLoad方法加载页面，如果页面中有Ext.onReady()方法的话则无法显示onReady中加载的内容，这时只能用iframe进行加载，iframe方法进行加载时如果页面中引用了ext的相关js文件，则会完整加载一次ext相关js文件影响效率
															html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='
																	+ url
																	+ '></iframe>'
														});
											}
											contentPanel.setActiveTab(n); //设置选择的tab为活动面板
										}
									}
								}
							});
					leftPanel.layout= 'fit';
					leftPanel.items.add(treePanel);
				}
				else{
				var buildTree = function(json) {
					return Ext.create('Ext.tree.TreePanel', {
						rootVisible : false,
						border : false,
						store : Ext.create('Ext.data.TreeStore', {
							root : {
								expanded : true,
								children : json.children
							}
						}),
						listeners : {
							itemclick : function(v, r, item) {
								var url = r.raw.url;
								if (url != "" && url != 'null' ) {
									url = '${pageContext.request.contextPath}/'
											+ url;
									var n = contentPanel
											.getComponent(r.data.id);
									if (!n) { //判断是否已经打开该面板
										n = contentPanel
												.add({ //新增tab
													id : r.data.id,
													title : r.data.text,
													closable : true,
													iconCls:r.raw.iconCls,
													// autoLoad:{ url:url,scripts:true}
													//注：autoLoad方法加载页面，如果页面中有Ext.onReady()方法的话则无法显示onReady中加载的内容，这时只能用iframe进行加载，iframe方法进行加载时如果页面中引用了ext的相关js文件，则会完整加载一次ext相关js文件影响效率
													html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='
															+ url
															+ '></iframe>'
												});
									}
									contentPanel.setActiveTab(n); //设置选择的tab为活动面板
								}
							}
						}
					});
				};
				Ext.Ajax.request({
					url : 'resourceController/getMenu.action',
					success : function(response) {
						var r = response.responseText;
						//r = r.replaceAll("checked", "");
						var json = Ext.JSON.decode(r);
						// alert(json);  
						Ext.each(json, function(el) {
							var panel = Ext.create('Ext.Panel', {
								id : el.id,
								title : el.text,
								layout : 'fit'
							});
							panel.add(buildTree(el));
							leftPanel.add(panel);
						});
					},
					failure : function(request) {
						Ext.MessageBox.show({
							title : '提示',
							msg : "操作失败",
							buttons : Ext.MessageBox.OK,
							icon : Ext.MessageBox.ERROR
						});
					},
					method : 'post'
				});
				}
				var manView = new Ext.Viewport({
					renderTo : Ext.getBody(),
					layout : 'border',
					items : [ {
						region : 'north', //子元素的方位：north、west、east、center、south
						xtype : "panel",
						height : 70,
						margins : '0 0 0 0',
						items : [ {
					        region : 'north',
					        html : '<div id="titlebar"><input type=hidden value="" id="activeFrameId">'
					            + '</input><h1>框架</h1></div>',
					        border : false,
					        height : 40
					      }, menuBar ]
					}, leftPanel, contentPanel
					, {
						region : 'south',
						xtype : "panel",
						html : "<div style='text-align:center'>"+sysConfig.productName+"</div>",
						height : 25
					} ]
				});
				manView.doLayout();
				createForm();
				form = Ext.create('defaultForm');
			});
</script>
</head>
<body>


</body>
</html>